<template>
  <div class="create-playlist">
    <m-header/>
    <MusicList
        :listPlaylistDetails="store.listPlaylistDetails"
        :paginationPlaylist="store.paginationPlaylist"
        @delMyPlaylistMusicSuccess="delMyPlaylistMusicSuccess"
    />
    <Review />
  </div>
</template>

<script setup>
import {useStore} from "@/store/index";
import MHeader from './components/MHeader/index.vue'
// 音乐列表
import MusicList from '@/components/MusicList/index.vue'
// 评论
import Review from '@/components/Review/index.vue'

import {useRoute} from "vue-router";
import {inject, onMounted, watch} from "vue";

const store = useStore()
const route = useRoute()
onMounted(async () => {
  // 获取歌单
  await delMyPlaylistMusicSuccess()
  // 获取歌单评论
  await store.getCommentPlaylist()
})

// // 从我的歌单中移除歌曲 重新请求列表
const delMyPlaylistMusicSuccess = async () => {
  await store.clickGetPlaylistDetail(route.query.id)
  store.currentInfo.id = route.query.id
}

// 页面刷新
const reload = inject('reloadPage')
watch(route, () => {
  reload()
})


</script>

<style scoped>

</style>
